<template>
    <div class ='navbar'>
        <ul class='fl'>
            <!-- 天假exact只在匹配/main时被激活. -->
                <li><router-link  to='/Main' exact><i class='icon icon-home'></i><span>首页</span></router-link></li>
                <li><router-link  to='/Main/choose-Lesson' ><i class='icon icon-edit'></i><span>选课</span></router-link></li>
                <li><router-link  to='/Main/Study' ><i class='icon icon-book'></i><span>学习</span></router-link></li>
                <li><router-link  to='/Main/Examination' ><i class='icon icon-pencil'></i><span>考试</span></router-link></li>
                <li><router-link  to='/Main/MySettings' ><i class='icon icon-user'></i><span>我的</span></router-link></li>
        </ul>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                navbar:[
                    1,2,3,4,5
                ]
            }
        }
    }
</script>
<style lang='scss'>
    $font-size:0.6rem;
.navbar ul{
    list-style: none;
    border-top:1px solid rgba(238, 238, 238, 1);
}
.navbar ul li{
     float:left;
     display:flex;
     width:3.2rem;
     justify-content: center;
     align-items: center;
     flex-flow: column wrap;
     height: 50px;
     height:3.2rem;
     max-height:50px;
     a{
         color:#ccc;
         &.router-link-active{
             color:rgba(0,206,169,1);
         }
     }

}
.navbar ul li span{
    align-self: flex-end; 
    font-size: $font-size*0.6;
    display: block;
        
}


.navbar {
    background: rgba(255, 255,255,1);
    position: fixed;
    bottom:0px;
    z-index:100;
}
.fl{
    float: left;
}
a.router-link-active{
    color:rgba(0,206,169,1);
}
</style>